<template>
  <div>
    <Jdd-Card :padding="15" style="margin-bottom:16px;">
      <div style="font-size: 16px;font-weight:600;">基础表单</div>
      <div
        style="margin-top:12px;"
      >表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。请参考view，无论样式、排版、交互都很全面，可以包含咱们业务对基础表单对所有需求。</div>
    </Jdd-Card>
    <Jdd-Card :padding="15">
      <div style="max-width:500px;margin:auto;">
        <Form
          :model="baseForm"
          :label-width="90"
          :label-colon="true"
          ref="baseForm"
          :rules="ruleValidate"
        >
          <FormItem label="标题" prop="title">
            <Jdd-Input v-model.trim="baseForm.title" placeholder="请输入标题" />
          </FormItem>
          <FormItem label="标题">
            <Jdd-DatePicker startTime="baseForm.startTime" endTime="baseForm.endTime"></Jdd-DatePicker>
          </FormItem>
          <FormItem label="目标描述">
            <Jdd-Input v-model.trim="baseForm.desc" placeholder="请输入阶段性工作目标" />
          </FormItem>
          <FormItem label="衡量标准">
            <Jdd-Input v-model.trim="baseForm.standard" placeholder="请输入衡量标准" />
          </FormItem>
          <FormItem label="用户" prop="userArr">
            <CheckboxGroup v-model="baseForm.userArr">
              <Checkbox label="develop">开发者</Checkbox>
              <Checkbox label="admin">管理员</Checkbox>
              <Checkbox label="role">role</Checkbox>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="邀请人">
            <Jdd-Input v-model.trim="baseForm.Inviter" placeholder="请输入邀请人" />
          </FormItem>
          <FormItem label="权重">
            <div style="display:flex;">
              <Jdd-Input v-model.trim="baseForm.weight" placeholder="请输入" type="number" />
              <span style="margin-left:5px;">%</span>
            </div>
          </FormItem>
          <FormItem label="目标公开" prop="isPulich">
            <RadioGroup v-model="baseForm.isPulich">
              <Radio label="1">公开</Radio>
              <Radio label="0">不公开</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
        <div style="text-align:center;">
          <Jdd-BtnSubmit :form="'baseForm'" @click="submitClick">提交</Jdd-BtnSubmit>
          <Jdd-BtnSubmit :form="'baseForm'" :beforeClick="beforeClick">直接提交</Jdd-BtnSubmit>
          <Jdd-BtnBack @click="backClick">取消</Jdd-BtnBack>
        </div>
      </div>
    </Jdd-Card>
  </div>
</template>
<script>
import { appAdd } from '../scripts/api'
import Vue from 'vue'
const dateFormat = Vue.filter('dateFormat')
export default {
  name: 'baseForm',
  data () {
    return {
      ruleValidate: {
        title: [
          {
            required: true,
            message: '标题不能为空',
            trigger: 'blur'
          }
        ],
        userArr: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value || value.length <= 0) {
                callback(new Error('请选择用户'))
              } else {
                callback()
              }
            }
          }
        ],
        isPulich: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value && value !== '0') {
                callback(new Error('请选择是否目标公开'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      baseForm: {
        title: '',
        startTime: new Date().getTime() - 300 * 60000,
        endTime: new Date().getTime(),
        desc: '',
        standard: '',
        userArr: [],
        Inviter: '',
        weight: 0,
        isPulich: '0'
      }
    }
  },
  methods: {
    resetFrom () {
      this.$refs.baseForm.resetFields()
    },
    submitClick (val, msgProxy) {
      if (val) {
        msgProxy(appAdd(this.baseForm)).then(res => {})
      }
    },
    beforeClick () {
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          this.$sysMessageProxy(appAdd(this.baseForm), '提交').then(res => {})
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    backClick () {
      this.resetFrom()
    }
  }
}
</script>
